<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/swiper.css">
    <link rel="stylesheet" type="text/css" href="./css/aui-flex.css">
    <link rel="stylesheet" type="text/css" href="./css/aui.css">
    <link rel="stylesheet" type="text/css" href="./css/common.css">
    <style>
        body {
            background: #f5f5f5;
        }
        /* 头部 */

        .headSearch {
            padding: 0 0.75rem;
        }

        .headSearch .searchIco {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            width: 0.7rem;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .headSearch .searchInput {
            background: #f5f5f5;
            padding: 0 0.5rem 0 1.9rem;
            height: 1.6rem;
            border-radius: 0.8rem;
            font-size: 0.6rem;
            line-height: 1.6rem;
            color: #999;
        }

        .head01 {
            padding-top: 0.5rem;
        }

        .head01 .headSearch {
            padding: 0;
        }

        .head01 .headSearch .searchInput {
            background: #FFF;
        }

        .head01 .myBtn {
            height: 1.8rem;
            width: 2.5rem;
            background: url(image/common/01.png) no-repeat center center;
            background-size: auto 1.2rem;
        }

        .head01 .cartBtn {
            height: 1.8rem;
            width: 2.5rem;
            line-height: 1.8rem;
            color: #FFF;
            text-align: center;
        }

        .head01 .cartBtn .aui-icon-cart {
            font-size: 1rem;
        }

        .head01 .catBtn {
            height: 1.8rem;
            width: 2.5rem;
            background: url(image/common/02.png) no-repeat center center;
            background-size: auto 0.8rem;
        }

        .head01 .catList {
            height: 2.2rem;
            overflow: hidden;
        }

        .head01 .catList .swiper-slide {
            width: auto;
            padding: 0 0.6rem;
            color: #FFF;
            font-size: 0.6rem;
            line-height: 2.2rem;
            text-align: center;
            position: relative;
        }

        .head01 .catList .swiper-slide.active {
            font-size: 0.7rem;
        }

        .head01 .catList .swiper-slide:before {
            content: "";
            position: absolute;
            left: 50%;
            right: 50%;
            bottom: 0.15rem;
            height: 2px;
            background: #FFF;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        .head01 .catList .swiper-slide.active:before {
            left: 1rem;
            right: 1rem;
            opacity: 1;
            visibility: visible;
        }

        .head02 .hTitle {
            margin-bottom: 0.2rem;
        }

        .head02 .hTitle li {
            position: relative;
            font-size: 0.9rem;
            line-height: 2rem;
            padding: 0 0.5rem;
            min-width: 3.75rem;
            text-align: center;
        }

        .head02 .hTitle li span {
            display: inline-block;
            position: relative;
        }

        .head02 .hTitle li.active span:before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0.1rem;
            width: 100%;
            height: 2px;
            background: #E73250;
        }

        .head02 .headSearch {
            padding-bottom: 0.75rem;
        }
    </style>
</head>

<body>
    <div id="top">
        <div data-page="0" class="bg-red">
            <div class="head01">
                <div class="headSearch aui-flex-col aui-flex-middle">
                    <div class="myBtn" tapmode onClick="openMyCenter()"></div>
                    <div class="flex-auto relative" tapmode onclick="openSearchWin('best');">
                        <div class="searchIco"><img src="image/common/03.png" alt=""></div>
                        <div class="searchInput">搜索商品</div>
                    </div>
                    <div class="cartBtn" tapmode onClick="openCart();"><span class="aui-iconfont aui-icon-cart"></span></div>
                </div>
                <div class="bestCat aui-flex-col aui-flex-middle aui-flex-between">
                    <div class="catList flex-auto">
                        <div class="swiper-container">
                            <div class="swiper-wrapper" id="cat-tab">
                                <!-- <div class="swiper-slide active" tapmode onClick="changeGodCat(0);">今日优选</div> -->
                            </div>
                        </div>
                    </div>
                    <div class="catBtn" tapmode onclick="openGodCat();"></div>
                </div>
            </div>
        </div>
        <div data-page="1" class="bg-white aui-hide">
            <div class="head02 aui-border-b">
                <ul class="hTitle aui-flex-col aui-flex-center">
                    <li class="active" tapmode onClick="changeFindType(0);"><span>任务大厅</span></li>
                    <!-- <li tapmode onClick="changeFindType(1);"><span>关注</span></li> -->
                </ul>
                <div class="headSearch">
                    <div class="relative" tapmode onclick="openSearchWin('post');" style="display:none">
                        <div class="searchIco"><img src="image/common/03.png" alt=""></div>
                        <div class="searchInput">大家都在搜</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer" style="height: 2.4rem;"></div>
    <div id="footer02" style="height: 3rem;"></div>
    <script type="text/x-dot-template" id="cat_tpl">
        <div class="swiper-slide active" tapmode onClick="changeGodCat(0);">今日优选</div>
        {{ for(var i in it) { }}
        <div class="swiper-slide" data-catId="{{= it[i].class_id }}" tapmode onClick="changeGodCat({{= parseInt(i)+1 }});">{{= it[i].class_name }}</div>
        {{ } }}
    </script>
</body>
<script type="text/javascript" src="./script/import.js"></script>
<script type="text/javascript" src="./script/swiper.min.js"></script>
<script type="text/javascript" src="./script/common.js"></script>
<script type="text/javascript">
    var ajpush;
    var topCatData;
    var catSwiper;
    var footerH;
    var footerH2;
    var headerH;
    apiready = function() {
        api.parseTapmode();
        api.setStatusBarStyle({
            style: 'dark'
        });
        $$('#top > div').css('padding-top', api.safeArea.top + 'px');
        headerH = $api.offset($api.byId('top')).h;
        footerH = $api.offset($api.byId('footer')).h;
        footerH2 = $api.offset($api.byId('footer02')).h;

        openIndexGroup();
        openHome(0);

        // 极光推送
        // ajpush = api.require('ajpush');
        // ajpush.setBadge({
        //     badge: 0
        // });
        // ajpush.init(function(ret) {});

        //是否登录
        // if (getUserId()) {
        //     reLogin();
        //     getJpushRegid();
        // } else {
        //     openLogin();
        // }

        //登录成功 事件监听
        // api.addEventListener({
        //     name: 'loginSuccessEvent'
        // }, function(ret, err) {
        //     api.closeFrame({
        //         name: 'login_banner'
        //     });
        //     //恢复推送
        //     ajpush.resumePush(function(ret) {});
        //     getJpushRegid();
        // });
        // //退出登录 事件监听
        // api.addEventListener({
        //     name: 'logOutEvent'
        // }, function(ret, err) {
        //     //停止推送
        //     ajpush.stopPush(function(ret) {});
        //     setTimeout(function() {
        //         openLogin();
        //     }, 1000);
        //
        // });

        // app打开中
        // ajpush.setListener(
        //     function(ret) {
        //         // alert("setListener===")
        //         // alert( JSON.stringify(ret) )
        //         var id = ret.id;
        //         var title = ret.title;
        //         var content = ret.content;
        //         var extra = ret.extra;
        //         if (extra.type) {}
        //         if (api.systemType == 'ios') {
        //             //弹出状态栏通知
        //             api.notification({
        //                 notify: {
        //                     title: title,
        //                     content: content,
        //                     extra: extra
        //                 }
        //             });
        //         }
        //
        //     }
        // );
        // android下推送监听
        api.addEventListener({
            name: 'appintent'
        }, function(ret, err) {
            if (ret && ret.appParam.ajpush) {
                var ajpushInfo = ret.appParam.ajpush;
                var id = ajpushInfo.id;
                var title = ajpushInfo.title;
                var content = ajpushInfo.content;
                var extra = ajpushInfo.extra;

                //alert("appintent===")
                //alert( JSON.stringify(ajpushInfo) )

                if (extra.type) {
                    pushHandle(extra);
                }
            }
        })

        // ios
        // api.addEventListener({
        //     name: 'noticeclicked'
        // }, function(ret, err) {
        //     if (ret) {
        //         //alert('noticeclicked' )
        //         //alert( JSON.stringify(ret) )
        //         // var ajpushInfo = ret.value;
        //         // var content = ajpushInfo.content;
        //         // var extra = ajpushInfo.extra;
        //
        //         if (ret.type) {
        //             pushHandle(ret.value);
        //         }
        //     }
        // })

        //自动检索 剪贴板内容
        //autoSearch();

    }; //apiready结束

    function openIndexGroup() {
        //打开footer frm
        api.openFrame({
            name: 'footer',
            url: 'footer.html',
            bounces: false,
            rect: {
                x: 0,
                y: api.winHeight - footerH2,
                w: 'auto',
                h: footerH2
            }
        });
        //发现 关注的group
        api.openFrameGroup({
            name: 'homeFindGroup',
            scrollEnabled: false,
            rect: {
                x: 0,
                y: headerH,
                w: 'auto',
                h: 'auto',
                marginBottom: footerH
            },
            background: '#f5f5f5',
            index: 0,
            frames: [{
                name: 'home_find',
                url: 'html/home_find.html',
                useWKWebView: true,
                bounces: true
            }, {
                name: 'home_follow',
                url: 'html/home_follow.html',
                useWKWebView: true,
                bounces: true
            }]
        }, function(ret, err) {
            var index = ret.index;
            $$('.head02 .hTitle li').removeClass('active').eq(index).addClass('active');
        });
        //优选的分类group
        api.ajax({
            url: BASE_URL + 'App/Select/sortLists',
            method: 'post',
            data: {}
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 1) {
                    topCatData = ret.data;
                    var tpl = $$('#cat_tpl').html();
                    var tempFn = doT.template(tpl);
                    $$('#cat-tab').html(tempFn(topCatData));
                    api.parseTapmode();
                    sliderInit();

                    var frameArr = [];
                    frameArr[0] = {
                        name: 'cat_0',
                        url: 'html/home_best_today_2.html',
                        bounces: true,
                        useWKWebView: true,
                        pageParam: {
                            page: 0
                        }
                    }
                    for (var i = 0; i < topCatData.length; i++) {
                        frameArr[i + 1] = {
                            name: 'cat_' + i,
                            url: 'html/home_best.html',
                            bounces: true,
                            useWKWebView: true,
                            pageParam: {
                                page: i + 1,
                                catId: topCatData[i].class_id
                            }
                        }
                    }
                    api.openFrameGroup({
                        name: 'homeBestGroup',
                        rect: {
                            x: 0,
                            y: headerH,
                            w: 'auto',
                            h: 'auto',
                            marginBottom: footerH
                        },
                        background: '#f5f5f5',
                        index: 0,
                        frames: frameArr
                    }, function(ret, err) {
                        var index = ret.index;
                        $$('#cat-tab > div').removeClass('active').eq(index).addClass('active');
                        catSwiper.slideTo(index - 1)
                    });

                    api.bringFrameToFront({
                        from: 'footer'
                    });

                }
            }
        });


    }
    //切换主页面
    function openHome(ind) {
        $$('[data-page]').addClass('aui-hide');
        $$('[data-page="' + ind + '"]').removeClass('aui-hide');
        headerH = $api.offset($api.byId('top')).h;


        if (ind == 0) {
            api.setFrameGroupAttr({
                name: 'homeFindGroup',
                hidden: true
            });
            api.closeFrame({
                name: 'home_news'
            });
            api.closeFrame({
                name: 'home_mine'
            });

            api.setFrameGroupAttr({
                name: 'homeBestGroup',
                rect: {
                    y: headerH
                },
                hidden: false
            });
        }
        if (ind == 1) {
            api.setFrameGroupAttr({
                name: 'homeBestGroup',
                hidden: true
            });
            api.closeFrame({
                name: 'home_news'
            });
            api.closeFrame({
                name: 'home_mine'
            });
            api.setFrameGroupAttr({
                name: 'homeFindGroup',
                rect: {
                    y: headerH
                },
                hidden: false
            });
        }
        if (ind == 2) {
            api.setFrameGroupAttr({
                name: 'homeBestGroup',
                hidden: true
            });
            api.setFrameGroupAttr({
                name: 'homeFindGroup',
                hidden: true
            });
            api.closeFrame({
                name: 'home_mine'
            });
            api.openFrame({
                name: 'home_news',
                url: 'html/home_news.html',
                bounces: false,
                rect: {
                    x: 0,
                    y: 0,
                    w: 'auto',
                    h: 'auto',
                    marginBottom: footerH
                }
            });
            api.bringFrameToFront({
                from: 'footer'
            });
        }
        if (ind == 3) {
            api.setFrameGroupAttr({
                name: 'homeBestGroup',
                hidden: true
            });
            api.setFrameGroupAttr({
                name: 'homeFindGroup',
                hidden: true
            });
            api.closeFrame({
                name: 'home_news'
            });
            api.openFrame({
                name: 'home_mine',
                url: 'html/home_mine.html',
                bounces: false,
                rect: {
                    x: 0,
                    y: 0,
                    w: 'auto',
                    h: 'auto',
                    marginBottom: footerH
                }
            });
            api.bringFrameToFront({
                from: 'footer'
            });
        }

    }


    //顶部分类滑动
    function sliderInit() {
        catSwiper = new Swiper('.catList .swiper-container', {
            freeMode: true,
            slidesPerView: 'auto',
            freeModeSticky: true
        });
    }
    //点击切换分类
    function changeGodCat(n) {
        api.setFrameGroupIndex({
            name: 'homeBestGroup',
            scroll: true,
            index: n
        });
    }
    //点击切换发现 关注
    function changeFindType(n) {
        api.setFrameGroupIndex({
            name: 'homeFindGroup',
            scroll: true,
            index: n
        });
    }
    //打开商品分类页面
    function openGodCat() {
        api.openWin({
            name: 'cat_list_win',
            url: 'html/best/cat_list_win.html',
            slidBackEnabled: false,
            animation: {
                type: 'movein',
                subType: 'from_bottom',
                duration: 300
            }
        });
    }
    //跳转检索页面
    function openSearchWin(type) {
        api.openWin({
            name: 'search_win',
            url: 'html/' + type + '/search_win.html'
        });
    }
    // 跳转文章
    function openMyCenter() {
        api.openWin({
            name: 'article_win',
            url: 'html/center/article_win.html',
            pageParam: {
                name: 'my'
            }
        });

    }
    //自动检索
    function autoSearch() {
        var msg = '【百草味-中秋坚果大礼包1358g】每日干果零食组合混合-整箱礼盒';
        api.openFrame({
            name: 'mask_auto_search',
            url: 'widget://html/mask_auto_search.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            bounces: false,
            animation: {
                type: 'fade',
                duration: 300
            },
            pageParam: {
                msg: msg
            }
        });
    }


    //极光推送
    function getJpushRegid() {
        ajpush.getRegistrationId(function(ret, err) {
            if (ret) {
                var regId = ret.id;
                api.ajax({
                    url: BASE_URL + 'App/User/saveJpush',
                    method: 'post',
                    data: {
                        values: {
                            userid: getUserId(),
                            regid: regId
                        }
                    }
                }, function(ret, err) {
                    if (ret && ret.code == 1) {
                        log('极光regId保存成功');
                    }
                });
            }
        });

    }

    function pushHandle(n) {
        var pushInfo = n;
        log(JSON.stringify(pushInfo));
        // switch (pushInfo.type) {
        //     case '1':
        //         if (!pushInfo.orderId) {
        //             toast('缺少参数');
        //             return;
        //         }
        //         openOrderDetail(pushInfo.orderId);
        //         break;
        //     case '2':
        //         if(!pushInfo.orderId || !pushInfo.id){
        //             toast('缺少参数');
        //             return;
        //         }
        //         openSrvDetail(pushInfo.orderId,pushInfo.id);
        //         break;
        //     case '3':
        //         if(!pushInfo.orderId || !pushInfo.id){
        //             toast('缺少参数');
        //             return;
        //         }
        //         openOtherSrvDetail(pushInfo.orderId,pushInfo.id);
        //         break;
        // }
    }
</script>

</html>
